<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/cart.css">
</head>
<body>
  
  <!--顶层导航上的产品官网 -->
  <div class="top-banner">
    <!-- 5g大图 -->
    <div class="top-banner-cen">
        <img  class="banner-pic1" src="../img/guanwang.png" alt="">
    </div>
  </div>

<!-- 导航层 -->
<div class ="nav">
  <div class="nav-cen">
     <!-- 左侧导航栏 -->
     <!-- 首页 -->
     <div class="top-banner-lef fl">
         <ul class="navul1 fl">
             <li> <a href="#">首页</a> <span class="shu">|</span></li>
             <li><a href="#">某街官网</a> <span class="shu">|</span></li>
             <li> <a href="#">花粉俱乐部</a> <span class="shu">|</span></li>
             <li><a href="#">V码（优购码）</a> <span class="shu">|</span></li>
             <li><a href="#">企业购</a> <span class="shu">|</span></li>
             <li><a href="#">Select Region</a> <span class="shu">|</span></li>
             <li class="navli1"><a href="#">更多精彩^</a> </li>
         </ul>
     </div>

     <!-- 右侧导航 -->  <!-- 注册登录部分 -->
     <div class="top-banner-rig ">
         <ul class="navul2 ">
             <li class="navli2"> <a href="#">请登录 <span>注册</span></a> <span class="shu">|</span></li>
             <li><a href="#">我的订单</a> <span class="shu">|</span></li>
             <li> <a href="#">客户服务</a> <span class="shu">|</span></li>
             <li><a href="#">网站导航</a> <span class="shu">|</span></li>
             <li><a href="#">手机版</a> <span class="shu">|</span></li>
             <li><a href="#">购物车</a> </li>
         </ul>
     </div>
 </div> 
</div>

    <!--华为商城-- 搜索栏-->
    <div class="search">
      <div class="search-cen">
          <!-- 官网产品图片 -->
          <div class="search-img">
              <img src="../img/moguji.png" alt="华为商城">
          </div>
            
        <!-- 华为专区 -->
        <div class="search-nav fl">
          <ul class="searchul3 fl">
              <li class="searchul3-active"><a href="#">某街专区</a></li>
              <li><a href="#">莫塞尔专区</a></li>
              <li><a href="#">某街智慧屏</a></li>
              <li><a href="#">智能家居</a></li>
              <li><a href="#">教育优惠</a></li>
          </ul>
      </div>

        <!-- 搜索框 -->
        <div class="searchwer ">
          <p class="fl"><a href="#">某街新品</a></p>
          <p class="fl"><a href="#">Mate X2</a></p>
      </div>
        <!-- 左侧放大镜 -->
        <!-- 左侧导航区 -->
        <div class="fangda-banner-nav">
            <div class="top-banner-lef fangda-banner-navv fl">
                <ul class="navul1 fl">
                    <li> <a href="#">首页</a> <span class="shu">|</span></li>
                    <li><a href="#">某街官网</a> <span class="shu">|</span></li>
                    <li> <a href="#">包包</a> <span class="shu">|</span></li>
                    <li><a href="#">包包畅享系列</a> <span class="shu">|</span></li>
                    <li><a href="#">某街畅享 </a> <span class="shu">|</span></li>
                    <li><a href="#">专柜级品质</a> <span class="shu">|</span></li>
                    <li class="navli1"><a href="#">全网最佳</a> </li>
                </ul>
            </div>
        </div>
        <!-- 购物车部分 -->
        <div class="container"></div>
        </div>
    </div>


    <script src="../js/jquery.min.js"></script>
    <script src="../jquery-pagination/jquery.pagination.js"></script>
    <script src="../js/tools.js"></script>
    <script>
      // 1, 根据 localStorage 中 购物车数据 动态渲染生成页面
      // 购物车不存在 或者 购物车数据为 空数组
  
      // 调用函数
      setPage();
  
      // 给父级标签添加点击事件
      // 使用 e.target 来判断 事件委托对象
      $('.container').click(e=>{
        // 获取 购物车数据
        const arr = JSON.parse( localStorage.getItem('cart') );
  
        // 如果点击的标签,name是 all 点击的是 全选标签
        if( e.target.getAttribute('name') === 'all' ){
          // 循环遍历数组 设定每一个对象 item 中 bool属性值
          // 与 点击的 e.target 的 checked 属性值 相同
          // 将新数组的结果 重新 设定给 localStorage 的 cart 存储
          arr.forEach( item=>{
            item.bool = e.target.checked;
          })
        }
  
  
        // 如果点击的标签,name是 not 点击的是 反选标签
        if( e.target.getAttribute('name') === 'not' ){
          // 循环遍历数组 设定每一个对象 item 中 bool属性值
          // 与 item.bool 存储的原始数值 取反
          // 将新数组的结果 重新 设定给 localStorage 的 cart 存储
          arr.forEach( item=>{
            item.bool = !(item.bool);
          })
        }
  
        // 如果点击的标签,name是 goods 点击的是 商品input标签
        if( e.target.getAttribute('name') === 'goods' ){
          // 给 数组中对应 索引下标 的对象 bool 属性值修改
          // 与点击的 input 标签 checked属性值相同
          // 获取点击标签 index属性的属性值 也就是 存储的索引下标
          let index = e.target.getAttribute('index')-0;
          // 数值中 索引下标相同的 对象 bool属性的属性值 
          // 是 点击标签 checked 属性值
          arr[index].bool = e.target.checked;
        }
  
        // 如果点击的标签,name是 - 点击的是 - 按钮
        if( e.target.getAttribute('name') === '-' ){
          // 给 数组中对应 索引下标 的对象 bool 属性值修改
          // 与点击的 input 标签 checked属性值相同
          // 获取点击标签 index属性的属性值 也就是 存储的索引下标
          let index = e.target.getAttribute('index')-0;
          // 数值中 索引下标相同的 对象 num 属性的属性值 做 累减1 的操作
          arr[index].num--;
  
          // 购物数量最少是1 如果小于 1  赋值 1
          // 但是 每次还会 继续向服务器发送请求
          // 最好是 禁用标签
          // if( arr[index].num < 1 ) arr[index].num = 1;
        }
  
        // 如果点击的标签,name是 + 点击的是 + 按钮
        if( e.target.getAttribute('name') === '+' ){
          // 给 数组中对应 索引下标 的对象 bool 属性值修改
          // 与点击的 input 标签 checked属性值相同
          // 获取点击标签 index属性的属性值 也就是 存储的索引下标
          let index = e.target.getAttribute('index')-0;
          // 数值中 索引下标相同的 对象 num 属性的属性值 做 累加1 的操作
          arr[index].num++;
  
          // 购买数量最多不能超过 库存数量
        }
  
        // 如果点击的标签,name是 dle 点击的是 我不要了 按钮
        if( e.target.getAttribute('name') === 'del' ){
          // 给 数组中对应 索引下标 的对象 bool 属性值修改
          // 与点击的 input 标签 checked属性值相同
          // 获取点击标签 index属性的属性值 也就是 存储的索引下标
          let index = e.target.getAttribute('index')-0;
          // 数组中根据 索引下标 删除 数组单元
          arr.splice(index,1);
  
          // 购买数量最多不能超过 库存数量
        }
  
  
  
        // 重新设定 localStorage 中 cart存储的数据
        localStorage.setItem('cart' , JSON.stringify( arr ));
        // 根据 新的 localStorage 重新生成页面
        setPage();
  
      })
  
  
  
      // 定义一个函数 动态渲染生成页面
      function setPage(){
        //  1, 获取 localStorage 中 购物车也就是cart 数据
        const cartArr = JSON.parse( localStorage.getItem('cart') );
   
        // 购物车没有数据的情况 生成 空页面
        if( cartArr === null ||  cartArr.length === 0 ){
          // 购物车不存在
          // 生成一个购物车为空的独立的页面
          $('.container').html('<h1>您的购物车为空,请放心大胆的购物</h1>');
          return;
        }
  
        // 生成页面  先定义 变量 存储 商品的种类 数量 总价
        let type = 0 ;
        let number = 0;
        let money = 0;
  
  
        // 定义一个变量 默认值是 true
        // 循环 遍历数组中的所有数据 如果有一个 对象中 bool 是 false 
        // 变量 赋值 false  终止循环
        let bool = true;
        for( let i = 0 ; i <= cartArr.length-1 ; i++ ){
          if( cartArr[i].bool === false ){
            bool = false;
            break;
          }
        }
  
  
        // 如果有数据就生成对应的内容
        let str = `
            <div class="panel panel-info ">
              <div class="panel-body bg-info">
                <div class="checkbox">
                  <label>
                    <input name="all" type="checkbox" value="" ${ bool ? 'checked' : '' }>
                    全选
                  </label>
                  <button name="not" class="del btn btn-danger">反选</button>
                </div>
              </div>
              <div class="panel-footer">
                <ul class="cart-list">
          `;
  
          cartArr.forEach( (item,key)=>{
            // 循环遍历数组 每一种商品 如果 购买 就计算价格
            if( item.bool ){
              // 种类 +1
              type++;
              // 数量 累加 num属性存储的属性值
              number += item.num;
              // 价格  累加 数量*单价
              money += item.num * item.goods_price;
            }
  
  
            str += `
              <li class="cart-item">
                <div class="left">
                  <input name="goods" type="checkbox" index=${key} ${ item.bool ? 'checked' : '' }>
                </div>
                <div class="right">
                  <div class="media">
                    <div class="media-left">
                      <a href="#">
                        <img class="media-object" src="${item.goods_small_logo}" alt="...">
                      </a>
                    </div>
                    <div class="media-body">
                      <h4 class="media-heading">${item.goods_name}</h4>
                      <p>
                        <i class="glyphicon glyphicon-yen"></i>
                        <span>${item.goods_price}</span>
                      </p>
                      <div class="btn-group pull-right" role="group" aria-label="...">
                        <button name="-" index="${key}" type="button" class="btn btn-default"  ${ item.num === 1 ? 'disabled' : '' }>-</button>
                        <button type="button" class="btn btn-default" disabled>${item.num}</button>
                        <button name="+" index="${key}" type="button" class="btn btn-default"  ${item.num == item.goods_number ? 'disabled' : ''}>+</button>
                      </div>
                      <button name="del" index="${key}" class="del btn btn-danger">哼，我不喜欢</button>
  
                    </div>
                  </div>
                </div>
              </li>`;
          })
  
            
  
  
  
        str += `</ul>
          </div>
        </div>
        <h1 style="color:red">亲爱的小主 ，您加购了${type}种 </h1>
        <h1 style="color:green">小主，您加购 ${number} 件商品呢</h1>
        <h1 style="color:orange">小主，您的钱包即将消费 ${money.toFixed(2)} 元</h1>
        `;
  
        // 将 str 写入标签对象
        $('.container').html(str);
      }
  
    </script>

 
</body>
</html>